<template>
	<div class="page-wrap">
		<div class="page-inner">
			<div class="page-table-ctx-wrap">
				<div class="tab-container">

					<div class="tab-panel">
						<div class="json-input">
							<el-input v-model="code_object_str" clearable type="textarea" :autosize="{ minRows: 2, maxRows: 4 }"
								placeholder="对象字符串">
							</el-input>
						</div>
						<div class="json-btn-box">
							<el-button type="primary" @click="render_table_use_api_res()">
								接口响应返回值渲染
							</el-button>
							<el-button type="primary" @click="render_table_use_object()">
								对象渲染
							</el-button>
							<el-button type="primary" @click="copy_from_object_str()">
								复制
							</el-button>
						</div>
					</div>

					<div class="tab-panel">
						<div class="json-input">
							<el-input v-model="code_array_str" clearable type="textarea" :autosize="{ minRows: 2, maxRows: 4 }"
								placeholder="数组字符串">
							</el-input>
						</div>
						<div class="json-btn-box">
							<el-button type="primary" @click="format_old_fields()">
								数组渲染 兼容旧表单
							</el-button>			
							<el-button type="primary" @click="render_table_use_array()">
								数组渲染
							</el-button>
							<el-button type="primary" @click="copy_from_array_str()">
								复制
							</el-button>
						</div>
					</div>
				</div>

				<!-- 控制器 -->
				<div class="actions-box">
					<div class="control-box">
						<div class="control-left">
							<div class="control-item">
								<el-input v-model="codeRowNumber" clearable type="nubmer" placeholder="初始表格行">
								</el-input>
							</div>
							<div class="control-item">
								<el-button type="primary" @click="setViewByNumber()">
									按行数渲染
								</el-button>
							</div>
						</div>
						<div class="control-right">
							<div class="action-item">
								<el-button type="danger" @click="doSort()">
									重新排序
								</el-button>
								<el-button type="danger" @click="doAdd()">
									添加分组
								</el-button>
								<el-button type="primary" @click="doGenerateColumns()">
									获取数组配置
								</el-button>
								<el-button type="primary" @click="doGenerateObject()">
									获取对象配置
								</el-button>
							</div>
						</div>
					</div>
				</div>
				<!-- 控制器 -->

				<!-- 渲染表格 -->
				<div class="table-view">
					<div class="custom-table">
						<el-table :data="tableData" stripe border>
							<!-- 数据循环体 -->

							<el-table-column v-for="(item, index) in tableColumns" :prop="item.field" :label="item.field_title"
								:width="item.table_width" :sortable="item.field_sortable"
								:show-overflow-tooltip="item.field_show_overflow_tooltip">
								<template slot-scope="scope">
									<!-- {{ scope.row }} -->
									<!-- scope.row[item.field] -->
									<div class="render-type render-text"
										v-if="!item.table_render_type || item.table_render_type == 'input'">
										<el-input v-model="scope.row[item.field]" :placeholder="item.field_title"
											@blur="doInputBlur(scope.row, item)"></el-input>
									</div>
									<div class="render-type render-text" v-else-if="item.table_render_type == 'radio'">
										<el-radio-group v-model="scope.row[item.field]">
											<el-radio :label="false">否</el-radio>
											<el-radio :label="true">是</el-radio>
										</el-radio-group>
									</div>

									<div class="render-type render-text" v-else-if="item.table_render_type == 'table_type_select'">
										<el-select v-model="scope.row[item.field]" placeholder="请选择">
											<el-option v-for="item in table_types" :key="item.value" :label="item.title" :value="item.value">
											</el-option>
										</el-select>
									</div>

									<div class="render-type render-text" v-else-if="item.table_render_type == 'form_type_select'">
										<el-select v-model="scope.row[item.field]" placeholder="请选择">
											<el-option v-for="item in form_types" :key="item.value" :label="item.title" :value="item.value">
											</el-option>
										</el-select>
									</div>
								</template>
							</el-table-column>

							<!-- 操作 -->
							<el-table-column v-if="tableRowActions.length" fixed="right" label="操作" width="60">
								<template slot-scope="scope">
									<div class="row-action-list">
										<div class="row-action-item">
											<el-button @click="doRowDelete(scope.row, scope.$index, scope)" type="text">删除</el-button>
										</div>
									</div>
								</template>
							</el-table-column>
							<!-- 操作 -->
						</el-table>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		name: "position-manager",
		components: {

		},
		props: {
			otherQueryParams: {
				//处理页面被引入到弹窗中的场景  比如页面【新闻评论回复】被页面【新闻评论】引入 通过点击【查看回复】展示弹窗触发
				type: Object,
				default: function() {
					return {
						// newsId: option.newsId,
						// commentId: option.commentId,
					};
				},
				required: false,
			},
		},
		data() {
			return {
				table_types: [{
						title: '文本',
						value: 'text',
					},
					{
						title: '标签',
						value: 'tag',
					},
					{
						title: '单图',
						value: 'image',
					},
					{
						title: '多图',
						value: 'image-list',
					},
					{
						title: '附件',
						value: 'file',
					},
				],
				form_types: [{
						title: '文本',
						value: 'input',
					},
					{
						title: '多行文本',
						value: 'textarea',
					},
					{
						title: '富文本',
						value: 'richtext',
					},
					{
						title: '数值',
						value: 'number',
					},
					{
						title: '单选',
						value: 'radio',
					},
					{
						title: '多选',
						value: 'checkbox',
					},
					{
						title: '下拉',
						value: 'select',
					},
					{
						title: '树选择器',
						value: 'treeSelect',
					},
					{
						title: '标签',
						value: 'tag',
					},
					{
						title: '单图',
						value: 'image',
					},
					{
						title: '多图',
						value: 'image-list',
					},
					{
						title: '附件',
						value: 'file',
					},
				],
				tableData: [],
				tableColumns: [
					//table_render_type: '' ||  input ||  radio || select
					// {
					//   field: "sort_in_table",
					//   field_title: "表格中顺序",
					//   table_width: "auto",
					//   column_sortable: false,
					//   column_show_overflow_tooltip: false,
					//   table_render_type: '',
					//   default_value: '',
					// },
					{
						field: "sort_in_form",
						field_title: "表单中顺序",
						table_width: "auto",
						column_sortable: false,
						column_show_overflow_tooltip: false,
						table_render_type: '',
						default_value: '',
					},
					{
						field: "field",
						field_title: "字段",
						table_width: "auto",
						column_sortable: false,
						column_show_overflow_tooltip: false,
						table_render_type: '',
						default_value: '',
					},
					{
						field: "field_title",
						field_title: "字段描述",
						table_width: "auto",
						column_sortable: false,
						column_show_overflow_tooltip: false,
						table_render_type: '',
						default_value: '',
					},
					{
						field: "table_width",
						field_title: "表格宽度",
						table_width: "auto",
						column_sortable: false,
						column_show_overflow_tooltip: false,
						table_render_type: '',
						default_value: 'auto',
					},
					// {
					//   field: "column_sortable",
					//   
					// field_title: "可排序",
					//   table_width: "auto",
					//   column_sortable: false, 
					//   column_show_overflow_tooltip: false, 
					//   table_render_type: 'radio',
					//   default_value: false,
					// },
					// {
					//   field: "column_show_overflow_tooltip",
					//   
					// field_title: "悬浮提示",
					//   table_width: "auto",
					//   column_sortable: false, 
					//   column_show_overflow_tooltip: false, 
					//   table_render_type: 'radio',
					//   default_value: false,
					// },
					{
						field: "table_render_type",
						field_title: "表格内展示类型",
						table_width: "auto",
						column_sortable: false,
						column_show_overflow_tooltip: false,
						table_render_type: 'table_type_select',
						default_value: 'text',
					},
					{
						field: "form_render_type",
						field_title: "表单内展示类型",
						table_width: "auto",
						column_sortable: false,
						column_show_overflow_tooltip: false,
						table_render_type: 'form_type_select',
						default_value: 'input',
					},

					{
						field: "is_hidden_in_table",
						field_title: "表格行隐藏",
						table_width: "auto",
						column_sortable: false,
						column_show_overflow_tooltip: false,
						table_render_type: 'radio',
						default_value: false,
					},
					{
						field: "is_hidden_in_form",
						field_title: "表单隐藏",
						table_width: "auto",
						column_sortable: false,
						column_show_overflow_tooltip: false,
						table_render_type: 'radio',
						default_value: false,
					},
					{
						field: "is_required_in_form",
						field_title: "表单必填",
						table_width: "auto",
						column_sortable: false,
						column_show_overflow_tooltip: false,
						table_render_type: 'radio',
						default_value: false,
					},
				],
				tableRowActions: [
					// { title: '编辑', },
					{
						title: '删除',
					},
				],
				//
				code_object_str: '',
				code_array_str: '',
				codeRowNumber: 5,
			};
		},
		computed: {
			totalPage() {
				return Math.ceil(this.total / this.pagination.pageSize)
			}
		},
		watch: {},
		created() {
			// this.setView();
		},
		mounted() {

		},
		methods: {
			//根据字段个数设置
			setViewByNumber() {
				let tableData = []
				for (var i = 0; i < this.codeRowNumber; i++) {
					let info = {}
					this.tableColumns.forEach(v => {
						info[v.field] = v.default_value;
					})
					tableData.push(info)
				}
				this.tableData = tableData
			},


			//根据json字符串设置字段默认字段配置
			render_table_use_api_res() {
				/*  输入数据源
      JSON.stringify({
        roleName: "",
        roleKey: "",
    })
      */
				if (this.code_object_str) {
					let res_info = JSON.parse(this.code_object_str)

					console.log('res_info', res_info)

					if (!res_info.data) {
						return
					}
					let json_info = res_info.data;
					console.log('json_info', json_info)

					let column_list = []
					if (json_info) {
						for (var key in json_info) {
							console.log('key', key)
							column_list.push({
								field: key || ''
							})
						}
					}

					this.getTableData(column_list);
				}
			},


			//根据json字符串设置字段默认字段配置
			render_table_use_object() {
				/*  输入数据源
      JSON.stringify({
        roleName: "",
        roleKey: "",
    })
      */
				if (this.code_object_str) {
					let json_info = JSON.parse(this.code_object_str)
					console.log('json_info', json_info)

					delete json_info.action
					delete json_info.token

					let column_list = []
					if (json_info) {
						for (var key in json_info) {
							column_list.push({
								field: key,
								field_title: json_info[key] || '',
							})
						}
					}

					this.getTableData(column_list);
				}
			},

			copy_from_object_str() {
				this.copyToClipboardAsync(this.code_object_str)
			},


			//根据json字符串设置字段默认字段配置
			render_table_use_array() {
				console.log('数组渲染')
				if (this.code_array_str) {
					let column_list = eval(this.code_array_str)
					this.getTableData(column_list);
				}
			},

			copy_from_array_str() {
				this.copyToClipboardAsync(this.code_array_str)
			},




			format_old_fields() {
				let field_list = []
				if (this.code_array_str) {
					field_list = eval(this.code_array_str)
				}

				field_list.forEach(v => {
					v.field = v.col
					v.field_title = v.label
				})

				this.getTableData(field_list)
			},


			getTableData(column_list) {
				let tableData = []
				column_list.forEach(data_item => {
					let info = {}
					this.tableColumns.forEach(v => {
						let field = v.field || v.col
						if (typeof data_item[field] == 'undefined') {
							info[field] = v.default_value;
						} else {
							info[field] = data_item[field];
						}

						//有默认值的设置一下默认值
						if ((v.default_value !== '' && v.default_value !== true && v.default_value !== true) && !info[
							field]) {
							info[field] = v.default_value;
						}
					})
					tableData.push(info)
				})
				this.tableData = tableData
			},



			//表格操作
			doAdd() {
				let info = {}
				for (var i = 0; i < this.codeRowNumber; i++) {
					this.tableColumns.forEach(v => {
						info[v.field] = v.default_value;
					})
				}
				this.tableData.push(info)
			},

			doRowDelete(row, index, info) {
				this.$log('row', row)
				this.$log('index', index)
				// this.$log('info', info)

				this.tableData.splice(index, 1)
			},


			//代码：获取字段配置
			doGenerateColumns() {
				this.doSetInputValue();
				this.copyToClipboardAsync(this.code_array_str)
			},

			//代码：获取表单对象
			doGenerateObject() {
				this.doSetInputValue();
				this.copyToClipboardAsync(this.code_object_str)
			},


			doSetInputValue() {
				this.$log('代码：获取字段配置', this.tableData)
				let ctx_array = JSON.stringify(this.tableData);
				this.code_array_str = ctx_array;
				console.log('数组参数配置')
				console.log(ctx_array)

				//
				let form = {}
				this.tableData.forEach(v => {
					form[v.field] = ''
				})
				let ctx_object = JSON.stringify(form)
				this.code_object_str = ctx_object;
				console.log('对象参数配置')
				console.log(ctx_object)
			},

			//复制
			async copyToClipboardAsync(text) {
				try {
					await navigator.clipboard.writeText(text);
					alertSucc('内容已复制到剪切板');
				} catch (err) {
					alertErr('复制失败');
				}
			},


			//排序值输入修改问题
			doInputBlur(data_item, column_item) {
				this.$log('input失去焦点监听 data_item', data_item)
				this.$log('input失去焦点监听 column_item', column_item)
			},



			//排序
			doSort() {
				this.tableData = this.tableData.sort((a, b) => (parseFloat(a.sort_in_form) || 0) - (parseFloat(b.sort_in_form) ||
					0))
			}
		},
	};
</script>

<style scoped lang="less">
	::v-deep .el-input__inner {
		padding: 0 3px;
		text-align: center;
	}

	.el-radio {
		margin-right: 5px;
	}




	.page-wrap {
		.page-inner {}
	}

	.page-ctx-wrap {
		background: #fff;
		padding: 20px;
		border-radius: 6px;
	}

	/deep/ .table-image-list {
		display: flex;

		.table-image-item {
			&+.table-image-item {
				margin-left: 10px;
			}
		}
	}

	/deep/ .el-table table {
		width: 100% !important;

		thead {
			th.el-table__cell {
				background: #f8f8f8;
				color: #000;
				// font-weight: bold;
			}
		}
	}

	.page-table-ctx-wrap {
		background: #fff;
		padding: 20px;
		border-radius: 6px;
	}


	.tab-container {
		display: flex;
		border-bottom: 1px solid #ccc;
		margin-bottom: 20px;
		padding-bottom: 20px;

		.tab-panel {
			flex: 1;

			&+.tab-panel {
				margin-left: 40px;
			}
		}
	}

	.json-input {
		margin-bottom: 20px;
	}

	.json-btn-box {
		display: flex;
		justify-content: flex-end;
	}


	// 新增
	.control-box {
		.flex-between();

		.control-left {
			.flex();

			.control-item {
				margin-right: 10px;
			}
		}

		.control-right {
			.flex();

			.action-item {
				margin-left: 10px;
			}
		}
	}

	.table-view {
		margin-top: 20px;
		margin-bottom: 20px;
	}

	.filter-box {
		margin-top: 20px;
		padding: 20px;
		padding-bottom: 0;
		background: rgb(248, 249, 250);
	}

	// 表格工具栏
	.table-util {
		.flex-between();

		.util-left {
			.flex();
			min-width: 100px;

			.util-items {
				.flex();

				.item {
					margin-right: 10px;
				}
			}
		}

		.util-right {}
	}

	.custom-current-page {
		text-align: center;
	}

	.checked-count {
		margin-left: 20px;
		margin-right: 20px;
	}


	.row-action-list {
		text-align: center;
		.flex-center();

		.row-action-item {
			&+.row-action-item:before {
				content: "";
				display: inline-block;
				width: 2px;
				height: 12px;
				background: #aaa;
				margin: 0 12px;
				margin: 0 6px;
				position: relative;
				top: 2px;
			}
		}

		.divider {}
	}
</style>